<template>
  <div class="home">
    <div class="grid-nine">
      <div
        v-for="(item, index) in gridNine"
        :key="index"
        @click="onClickAction('grid-nine-item', item)"
      >
        {{ `${index + 1} ${item.title}` }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ApiState, StoreRequest, StoreRequestTd } from '@/store';
import { ApiLoginTd, ApiLogin } from '@/http/api/mian';

@Component
export default class Home extends Vue {
  @StoreRequest(ApiLogin) private apiLogin!: StoreRequestTd<ApiLoginTd>;
  @ApiState(ApiLogin.name) private signInInfo!: object;
  @ApiState(ApiLogin.status) private loading!: boolean;

  private data() {
    return {
      gridNine: [
        {
          title: 'css',
          name: 'css',
        },
      ],
    };
  }
  private mounted() {
    this.apiLogin({
      data: {
        username: 'user',
        password: 'pass',
      },
      params: {
        code: '1234',
      },
    });
  }

  private onClickAction(type: string, item: any) {
    switch (type) {
      case 'grid-nine-item':
        this.$router.push({ name: item.name });
        break;
    }
  }
}
</script>
<style lang="less">
.generate-columns(@n, @i: 1) when (@i =< @n) {
  div:nth-child(@{i}) {
    // width: (@i * 100% / @n);
    background-color: darken(white, @i * 4%);
    color: rgb(255/10 * @i, 100/10 * @i, 200/10 * @i);
  }
  .generate-columns(@n, (@i + 1));
}

.home {
  height: 100%;
  display: flex;
  .grid-nine {
    margin: auto;
    width: 600px;
    height: 600px;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: repeat(9999, 300px);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    > div {
      cursor: pointer;
    }
    > div:hover {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    .generate-columns(9);
  }
}
</style>
